<script setup>
import {reactive,ref} from "vue";
import {Lock, User, View} from '@element-plus/icons-vue';
import {login} from "@/net/index.js";
import router from "@/router/index.js";
const formRef = ref();

const form=reactive({
  username:'',
  password:'',
  remember:false
})
const rule={
  username:[
    {required:true,message:"请输入用户名"}
  ],
  password:[
    {required:true,message:"请输入密码"}
  ]
}
function userLogin(){
  formRef.value.validate((valid)=>{
    if(valid){
      login(form.username,form.password,form.remember,()=>{
        router.push('/index')
      })
    }
  })
}
</script>
<template>

  <div style="text-align:center;margin:0 20px;width:90%;height:100vh">
    <div style="margin-top:150px">
      <div style="font-size:30px;font-weight: bold" >
        登录
      </div>
      <div style="font-size:15px;color:gray;margin-top:10px" >
        登录之后才能更好的浏览网页内容哦！
      </div>
      <div style="margin-top:50px">
        <el-form :model="form" :rules="rule" ref="formRef">
          <el-form-item prop="username">
            <el-input v-model="form.username" type="text" placeholder="请输入用户名或者邮箱地址">
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password"  maxlength="16" type="password" placeholder="请输入密码">
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
              <template #suffix>
                <el-icon @click="onclick(undefined)" > <View /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12" style="text-align:left">
              <el-form-item prop="remember">
                <el-checkbox v-model="form.remember" label="记住我">
                </el-checkbox>
              </el-form-item>

            </el-col>
            <el-col :span="12" style="text-align:right">
                <el-link @click="router.push('/reset')">忘记密码</el-link>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div>
        <el-button @click="userLogin" style="width:270px" type="success" plain>立即登录</el-button>
      </div>
      <el-divider><span style="font-size: 14px;color:gray">没有账号</span></el-divider>
      <div style="margin-top:40px">
        <el-button @click="router.push('/register')" style="width:270px" type="warning" plain>立即注册</el-button>
      </div>
    </div>

  </div>

</template>

<style scoped>

</style>